import { QuestionCircleOutlined } from "@ant-design/icons";
import { Tooltip } from "antd";
import classNames from "classnames";
import React, { PropsWithChildren, useMemo } from "react";
import getPrefixCls from "./utils";
import Task, { TaskProps } from "./Task";
import type { Status } from "./types";
import { StatusIcon } from "./util";

type TaskChild = React.ReactElement<PropsWithChildren<TaskProps>, typeof Task>;
export interface StageProps {
  /**
   * 类名
   */
  className?: string;
  /**
   * 样式
   */
  style?: React.CSSProperties;
  /**
   * className 前缀
   */
  prefixCls?: string;
  /**
   * 必填，阶段标识，要求在同一个 Pipeline 中唯一
   */
  name: string;
  /**
   * 阶段名称
   */
  title?: React.ReactNode;
  /**
   * 阶段问号内容，若为空则不展示问号 icon
   */
  tooltip?: React.ReactNode;
  /**
   * 阶段状态
   */
  status?: Status;
  /**
   * process 状态的进度值
   */
  percent?: number;
  /**
   * 阶段操作区
   */
  extra?: React.ReactNode;
  /**
   * @description 手动添加children申明
   */
  children?: any;
}

export const stageContext = React.createContext<{
  stageName?: string;
  stageIndex?: number;
}>({});

const Stage: React.FC<
  StageProps & {
    index?: number;
  }
> = (props) => {
  const {
    className,
    style: customizeStyle,
    prefixCls: customizePrefixCls,
    children,
    name,
    title,
    tooltip,
    status,
    percent,
    extra,
    index,
  } = props;

  const prefixCls = getPrefixCls("pipeline", customizePrefixCls);
  const stageCls = `${prefixCls}-stage`;

  const style = useMemo(() => {
    const width = customizeStyle?.width || 256;
    return {
      ...customizeStyle,
      ...{
        width,
        minWidth: width,
      },
    };
  }, [customizeStyle]);

  return (
    <div
      className={classNames(
        stageCls,
        `${className ? ` ${className}-stage` : ""}`
      )}
      style={style}
      data-stage-name={name}
    >
      <div className={`${stageCls}-title`}>
        <div className={`${stageCls}-title-left`}>
          {status && (
            <StatusIcon
              prefixCls={prefixCls}
              className={`${stageCls}-title-left-status`}
              status={status}
              percent={percent}
            />
          )}
          {title && (
            <span className={`${stageCls}-title-left-text`}>{title}</span>
          )}
          {tooltip && (
            <Tooltip
              className={`${stageCls}-title-left-tooltip`}
              placement="top"
              title={tooltip}
            >
              <QuestionCircleOutlined style={{ cursor: "pointer" }} />
            </Tooltip>
          )}
        </div>
        {extra && <div className={`${stageCls}-title-extra`}>{extra}</div>}
      </div>
      <div className={`${stageCls}-tasks`}>
        <stageContext.Provider
          value={{
            stageName: name,
            stageIndex: index,
          }}
        >
          {React.Children.map(children, (task: TaskChild, index) => {
            if (!React.isValidElement(task)) return task;
            const props = task.props || {};
            return React.cloneElement(task, { ...props, index });
          })}
        </stageContext.Provider>
      </div>
    </div>
  );
};

export default Stage;
